<template>
  <div>
    <!-- <movable-area scale-area class="movable-area">
      <movable-view class="movable-view" direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="scale" @dblclick="dblclick"> -->
    <table border="1" v-if="tableType == 1" class="tableTest">
      <tbody>
        <tr>
          <th>资产</th>
          <th class="textRight">期末余额</th>
          <th class="textRight">年初余额</th>
        </tr>
        <block v-for="(item, index) in tableData" :key="index">
          <tr :class="{ success_class: item.parentBase.fbFlag }">
            <td>
              <div class="cell">
                <span v-if="item.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(item.parentBase.accessory)">{{ item.parentBase.lineName }}</span>
                <span v-else>{{ item.parentBase.lineName }}</span>
              </div>
            </td>
            <td class="textRight">{{ item.parentBase.endMoney }}</td>
            <td class="textRight">{{ item.parentBase.headMoney }}</td>
          </tr>
          <block v-if="item.children && item.children.length" v-for="(it, ind) in item.children" :key="ind">
            <tr :class="{ success_class: it.parentBase.fbFlag }">
              <td>
                <div class="cell" style="margin-left: 10rpx">
                  <span v-if="it.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(it.parentBase.accessory)">{{ it.parentBase.lineName }}</span>
                  <span v-else>{{ it.parentBase.lineName }}</span>
                </div>
              </td>
              <td class="textRight">{{ it.parentBase.endMoney }}</td>
              <td class="textRight">{{ it.parentBase.headMoney }}</td>
            </tr>
            <block v-if="it.children && it.children.length" v-for="(v, i) in it.children" :key="i">
              <tr :class="{ success_class: v.parentBase.fbFlag }">
                <td>
                  <div class="cell" style="margin-left: 20rpx">
                    <span v-if="v.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(v.parentBase.accessory)">{{ v.parentBase.lineName }}</span>
                    <span v-else>{{ v.parentBase.lineName }}</span>
                  </div>
                </td>
                <td class="textRight">{{ v.parentBase.endMoney }}</td>
                <td class="textRight">{{ v.parentBase.headMoney }}</td>
              </tr>
              <block v-if="v.children && v.children.length" v-for="(a, i) in v.children" :key="i">
                <tr :class="{ success_class: a.parentBase.fbFlag }">
                  <td>
                    <div class="cell" style="margin-left: 30rpx">
                      <span v-if="a.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(a.parentBase.accessory)">{{ a.parentBase.lineName }}</span>
                      <span v-else>{{ a.parentBase.lineName }}</span>
                    </div>
                  </td>
                  <td class="textRight">{{ a.parentBase.endMoney }}</td>
                  <td class="textRight">{{ a.parentBase.headMoney }}</td>
                </tr>

                <block v-if="a.children && a.children.length" v-for="(b, i) in a.children" :key="i">
                  <tr :class="{ success_class: b.parentBase.fbFlag }">
                    <td>
                      <div class="cell" style="margin-left: 40rpx">
                        <span v-if="b.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(b.parentBase.accessory)">{{ b.parentBase.lineName }}</span>
                        <span v-else>{{ b.parentBase.lineName }}</span>
                      </div>
                    </td>
                    <td class="textRight">{{ b.parentBase.endMoney }}</td>
                    <td class="textRight">{{ b.parentBase.headMoney }}</td>
                  </tr>
                </block>
              </block>
            </block>
          </block>
        </block>
      </tbody>
    </table>

    <table border="1" v-if="tableType == 2" class="tableTest tabletra">
      <tbody>
        <tr>
          <th>资产</th>
          <th class="textRight">期末余额</th>
          <th class="textRight">年初余额</th>
        </tr>
        <block v-for="(item, index) in tableData" :key="index">
          <tr :class="{ success_class: item.parentBase.fbFlag }">
            <td>
              <div class="cell">
                <span v-if="item.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(item.parentBase.accessory)">{{ item.parentBase.lineName }}</span>
                <span v-else>{{ item.parentBase.lineName }}</span>
              </div>
            </td>
            <td class="textRight">{{ item.parentBase.endMoney }}</td>
            <td class="textRight">{{ item.parentBase.headMoney }}</td>
          </tr>
          <block v-if="item.children && item.children.length" v-for="(it, ind) in item.children" :key="ind">
            <tr :class="{ success_class: it.parentBase.fbFlag }">
              <td>
                <div class="cell" style="margin-left: 10rpx">
                  <span v-if="it.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(it.parentBase.accessory)">{{ it.parentBase.lineName }}</span>
                  <span v-else>{{ it.parentBase.lineName }}</span>
                </div>
              </td>
              <td class="textRight">{{ it.parentBase.endMoney }}</td>
              <td class="textRight">{{ it.parentBase.headMoney }}</td>
            </tr>
            <block v-if="it.children && it.children.length" v-for="(v, i) in it.children" :key="i">
              <tr :class="{ success_class: v.parentBase.fbFlag }">
                <td>
                  <div class="cell" style="margin-left: 20rpx">
                    <span v-if="v.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(v.parentBase.accessory)">{{ v.parentBase.lineName }}</span>
                    <span v-else>{{ v.parentBase.lineName }}</span>
                  </div>
                </td>
                <td class="textRight">{{ v.parentBase.endMoney }}</td>
                <td class="textRight">{{ v.parentBase.headMoney }}</td>
              </tr>
              <block v-if="v.children && v.children.length" v-for="(a, i) in v.children" :key="i">
                <tr :class="{ success_class: a.parentBase.fbFlag }">
                  <td>
                    <div class="cell" style="margin-left: 30rpx">
                      <span v-if="a.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(a.parentBase.accessory)">{{ a.parentBase.lineName }}</span>
                      <span v-else>{{ a.parentBase.lineName }}</span>
                    </div>
                  </td>
                  <td class="textRight">{{ a.parentBase.endMoney }}</td>
                  <td class="textRight">{{ a.parentBase.headMoney }}</td>
                </tr>
                <block v-if="a.children && a.children.length" v-for="(b, i) in a.children" :key="i">
                  <tr :class="{ success_class: b.parentBase.fbFlag }">
                    <td>
                      <div class="cell" style="margin-left: 40rpx">
                        <span v-if="b.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(b.parentBase.accessory)">{{ b.parentBase.lineName }}</span>
                        <span v-else>{{ b.parentBase.lineName }}</span>
                      </div>
                    </td>
                    <td class="textRight">{{ b.parentBase.endMoney }}</td>
                    <td class="textRight">{{ b.parentBase.headMoney }}</td>
                  </tr>
                </block>
              </block>
            </block>
          </block>
        </block>
      </tbody>
    </table>

    <table border="1" v-if="tableType == 3" class="tableTest">
      <tbody>
        <tr>
          <th>编号</th>
          <th>科目名称</th>
          <th class="textRight">期初余额</th>
          <th class="JD">
            <div class="thJD">
              <div class="tit">本期发生</div>
              <div class="spanTxt">
                <span>借方</span>
                <span>贷方</span>
              </div>
            </div>
          </th>
          <th class="textRight">期末余额</th>
        </tr>
        <block v-for="(item, index) in tableData" :key="index">
          <tr :class="{ success_class: item.parentBase.fbFlag }">
            <td style="width: 70rpx">{{ item.parentBase.financeNumber }}</td>
            <td>
              <div class="cell">
                <div v-if="item.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(item.parentBase.accessory)">{{ item.parentBase.lineName }}</div>
                <div v-else>{{ item.parentBase.lineName }}</div>
              </div>
            </td>
            <td class="tdd">
              <div class="stastBalance">
                <span class="stastBalanceOne"> {{ item.parentBase.headMoneyType }} </span>
                <span class="stastBalanceTwo"> {{ item.parentBase.headMoney }} </span>
              </div>
            </td>
            <td class="JD">
              <div class="tdJD">
                <div class="JDll">{{ item.parentBase.currentBorrow }}</div>
                <div class="JDll">{{ item.parentBase.currentLoan }}</div>
              </div>
            </td>
            <td class="tdd">
              <div class="stastBalance">
                <span class="stastBalanceOne"> {{ item.parentBase.endMoneyType }} </span>
                <span class="stastBalanceTwo"> {{ item.parentBase.endMoney }} </span>
              </div>
            </td>
          </tr>
          <block v-if="item.children && item.children.length" v-for="(it, ind) in item.children" :key="ind">
            <tr :class="{ success_class: it.parentBase.fbFlag }">
              <td style="width: 70rpx">{{ it.parentBase.financeNumber }}</td>
              <td>
                <div class="cell" style="margin-left: 10rpx">
                  <div v-if="it.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(it.parentBase.accessory)">{{ it.parentBase.lineName }}</div>
                  <div v-else>{{ it.parentBase.lineName }}</div>
                </div>
              </td>
              <td class="tdd">
                <div class="stastBalance">
                  <span class="stastBalanceOne"> {{ it.parentBase.headMoneyType }} </span>
                  <span class="stastBalanceTwo"> {{ it.parentBase.headMoney }} </span>
                </div>
              </td>
              <td class="JD">
                <div class="tdJD">
                  <div class="JDll">{{ it.parentBase.currentBorrow }}</div>
                  <div class="JDll">{{ it.parentBase.currentLoan }}</div>
                </div>
              </td>
              <td class="tdd">
                <div class="stastBalance">
                  <span class="stastBalanceOne"> {{ it.parentBase.endMoneyType }} </span>
                  <span class="stastBalanceTwo"> {{ it.parentBase.endMoney }} </span>
                </div>
              </td>
            </tr>
            <block v-if="it.children && it.children.length" v-for="(v, ind) in it.children" :key="ind">
              <tr :class="{ success_class: v.parentBase.fbFlag }">
                <td style="width: 7rpx">{{ v.parentBase.financeNumber }}</td>
                <td>
                  <div class="cell" style="margin-left: 20rpx">
                    <div v-if="v.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(v.parentBase.accessory)">{{ v.parentBase.lineName }}</div>
                    <div v-else>{{ v.parentBase.lineName }}</div>
                  </div>
                </td>
                <td class="tdd">
                  <div class="stastBalance">
                    <span class="stastBalanceOne"> {{ v.parentBase.headMoneyType }} </span>
                    <span class="stastBalanceTwo"> {{ v.parentBase.headMoney }} </span>
                  </div>
                </td>
                <td class="JD">
                  <div class="tdJD">
                    <div class="JDll">{{ v.parentBase.currentBorrow }}</div>
                    <div class="JDll">{{ v.parentBase.currentLoan }}</div>
                  </div>
                </td>
                <td class="tdd">
                  <div class="stastBalance">
                    <span class="stastBalanceOne"> {{ v.parentBase.endMoneyType }} </span>
                    <span class="stastBalanceTwo"> {{ v.parentBase.endMoney }} </span>
                  </div>
                </td>
              </tr>

              <block v-if="v.children && v.children.length" v-for="(a, ind) in v.children" :key="ind">
                <tr :class="{ success_class: a.parentBase.fbFlag }">
                  <td style="width: 7rpx">{{ a.parentBase.financeNumber }}</td>
                  <td>
                    <div class="cell" style="margin-left: 30rpx">
                      <div v-if="a.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(a.parentBase.accessory)">{{ a.parentBase.lineName }}</div>
                      <div v-else>{{ a.parentBase.lineName }}</div>
                    </div>
                  </td>
                  <td class="tdd">
                    <div class="stastBalance">
                      <span class="stastBalanceOne"> {{ a.parentBase.headMoneyType }} </span>
                      <span class="stastBalanceTwo"> {{ a.parentBase.headMoney }} </span>
                    </div>
                  </td>
                  <td class="JD">
                    <div class="tdJD">
                      <div class="JDll">{{ a.parentBase.currentBorrow }}</div>
                      <div class="JDll">{{ a.parentBase.currentLoan }}</div>
                    </div>
                  </td>
                  <td class="tdd">
                    <div class="stastBalance">
                      <span class="stastBalanceOne"> {{ a.parentBase.endMoneyType }} </span>
                      <span class="stastBalanceTwo"> {{ a.parentBase.endMoney }} </span>
                    </div>
                  </td>
                </tr>

                <block v-if="a.children && a.children.length" v-for="(b, ind) in a.children" :key="ind">
                  <tr :class="{ success_class: b.parentBase.fbFlag }">
                    <td style="width: 7rpx">{{ a.parentBase.financeNumber }}</td>
                    <td>
                      <div class="cell" style="margin-left: 40rpx">
                        <div v-if="b.parentBase.accessory" class="tdSpan2" @click="seeAccessoryPho(b.parentBase.accessory)">{{ b.parentBase.lineName }}</div>
                        <div v-else>{{ b.parentBase.lineName }}</div>
                      </div>
                    </td>
                    <td class="tdd">
                      <div class="stastBalance">
                        <span class="stastBalanceOne"> {{ b.parentBase.headMoneyType }} </span>
                        <span class="stastBalanceTwo"> {{ b.parentBase.headMoney }} </span>
                      </div>
                    </td>
                    <td class="JD">
                      <div class="tdJD">
                        <div class="JDll">{{ b.parentBase.currentBorrow }}</div>
                        <div class="JDll">{{ b.parentBase.currentLoan }}</div>
                      </div>
                    </td>
                    <td class="tdd">
                      <div class="stastBalance">
                        <span class="stastBalanceOne"> {{ b.parentBase.endMoneyType }} </span>
                        <span class="stastBalanceTwo"> {{ b.parentBase.endMoney }} </span>
                      </div>
                    </td>
                  </tr>
                </block>
              </block>
            </block>
          </block>
        </block>
      </tbody>
    </table>
    <!-- </movable-view>
    </movable-area> -->
  </div>
</template>
<script>
export default {
  props: ['tableType', 'tableData'],
  data() {
    return {
      scale: 1,
    }
  },
  onLoad(option) {
    this.journId = option.id
    this.queryData = option
    this.getFindFinanceInformation()
    // 用于操作上一个下一个的id数组
    this.financeAudId = JSON.parse(uni.getStorageSync('financeAudId') || '[]')
  },
  methods: {
    dblclick() {
      if (this.scale == 10) {
        this.scale = 1
      } else {
        this.scale = 10
      }
    },
    // 预览凭证
    seeAccessoryPho(item) {
      if (item) {
        let imageArr = item.split(',')
        uni.previewImage({
          current: 0, // 预览图片的下标
          urls: imageArr, // 预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  text-align: center;
}

.movable-area {
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: hidden;
}
.tabletra {
  transform: translateX(-1px);
}

.tableTest {
  float: left;
  .cell {
    width: 100%;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
  }
  .tdSpan2 {
    color: #2c83e4;
  }
  tr {
    th {
      padding: 4px 5px;
      text-align: left;
    }
    td {
      box-sizing: border-box;
      width: 220rpx;
      padding: 2px 5px;
      height: 46rpx;
      span {
        display: flex;
        align-items: center;
        height: 100%;
      }
    }
    .JD {
      width: 360rpx !important;
      padding: 0 !important;
      .thJD {
        text-align: right;
        .tit {
          padding: 2px 5px;
        }
        .spanTxt {
          border-top: 1px solid #999999;
          display: flex;
          span {
            border-right: 1px solid #999999;
            text-align: right;
            flex: 1;
            width: 0;
            padding: 2px 5px;
            &:nth-child(2) {
              border-right: none;
            }
          }
        }
      }
      .tdJD {
        display: flex;
        height: 100%;
        .JDll {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          height: 100%;
          border-right: 1px solid #999999;
          text-align: right;
          flex: 1;
          width: 0;
          padding: 2px 5px;
          &:nth-child(2) {
            border-right: none;
          }
        }
      }
    }
    .tdd {
      width: 250rpx;
      padding: 0 !important;
      .stastBalance {
        display: flex;
        align-items: center;
        height: 100%;
        justify-content: space-between;
        // padding: 2px 5px;
        .stastBalanceOne {
          position: relative;
          display: flex;
          padding: 0 10rpx;
          align-items: center;
          line-height: 100%;
          height: 100%;
          &::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 1px;
            background-color: rgb(114, 114, 114);
          }
        }
        .stastBalanceTwo {
          display: flex;
          padding: 0 10rpx;
          align-items: center;
          justify-content: flex-end;
          height: 100%;
          padding: 0 10rpx;
          flex: 1;
          width: 0;
          text-align: right;
          padding-left: 8px;
        }
      }
    }
  }
}

.textRight {
  text-align: right !important;
}

.success_class {
  background-color: #fde1e3;
}
</style>
